<template>
  <el-dialog
    title="翻翻乐选项"
    :visible.sync="dialogVisible"
    width="300px"
    class="game-check-dialog"
    :show-close="false"
    :close-on-click-modal="false"
    :before-close="submitCheck"
    :close-on-press-escape="false"
    append-to-body
    modal-append-to-body
    center
  >
    <!--   -->
    <el-popover
      popper-class="game-label-popover-contain"
      class="game-label-popover"
      placement="right-start"
      trigger="hover"
    >
      <div class="">
        <h4>
          记忆翻牌：
          <span class="text">限时找出英文与释义的卡牌</span>
        </h4>
        <div>
          <img src="@/assets/img/game-introduce.png" alt="" />
        </div>
      </div>
      <i class="iconfont icon-wenhao" slot="reference"></i>
    </el-popover>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <el-form-item label="显示难度选择" prop="difficulty">
        <!--  -->
        <!-- <template v-slot:label>
          <div class="label-difficulty">
            <span>显示难度选择</span>
          </div>
        </template> -->
        <el-radio-group v-model="ruleForm.difficulty">
          <el-radio
            v-for="item in difficultyList"
            :key="item.difficulty"
            :label="item.difficulty"
            >{{ item.title }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="内容选择" prop="type">
        <el-radio-group v-model="ruleForm.type">
          <el-radio :label="4">全部</el-radio>
          <el-radio :label="1" v-if="wordNum.newWord"> 生词 </el-radio>
          <el-radio :label="2" v-if="wordNum.knowWord"> 熟词 </el-radio>
          <el-radio :label="3" v-if="wordNum.studyWord"> 已学 </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="背景选择" prop="bg">
        <el-radio-group v-model="ruleForm.bg">
          <el-radio :label="1">
            默认
            <!-- <img src="../../../assets/img/card-back.png" alt="" /> -->
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button class="button button-bg-primary" @click="submitCheck"
        >开始游戏</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      difficultyList: [
        {
          difficulty: 1,
          title: "简单",
        },
        {
          difficulty: 2,
          title: "中等",
        },
        {
          difficulty: 3,
          title: "困难",
        },
        {
          difficulty: 4,
          title: "专家",
        },
        {
          difficulty: 5,
          title: "大师",
        },
        {
          difficulty: 6,
          title: "特级大师",
        },
      ],
      dialogVisible: true,
      ruleForm: {
        type: 4,
        difficulty: 1,
        bg: 1,
      },
      rules: {},
    };
  },
  methods: {
    submitCheck() {
      this.$emit("startGame", this.ruleForm);
      this.dialogVisible = false;
    },

    openDialog() {
      this.dialogVisible = true;
    },
  },
  created() {},
  props: {
    wordNum: {
      type: Object,
      default: function () {
        return {
          totalNumber: 0,
          newWord: 0,
          knowWord: 0,
          studyWord: 0,
        };
      },
    },
  },
};
</script>